<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="能力素养"
      :visible="show"
      width="560px"
      append-to-body
      @close="cancelAbility"
    >
      <div class="ability_container">
        <div class="ability_state_content">
          <div class="turn_total">
            <i
              @click="turnLeft"
              class="el-icon-d-arrow-left"
              :class="{ 'prohibited': nowIndex <= 0 }"
            ></i>
            <div class="text">{{ nowStuEvaluateName }}</div>
            <i
              @click="turnRight"
              class="el-icon-d-arrow-right"
              :class="{ 'prohibited': stuEvaluateList.length - 1 <= nowIndex }"
            ></i>
          </div>
          <div class="creditDetails" ref="creditDetailsRef"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'AbilityDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    stuEvaluateList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      nowIndex: 0,
      nowStuEvaluateName: '',
      indicator: [],
      dataValue: []
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.$nextTick(() => {
          this.nowIndex = 0
          this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].categoryName
          this.getRadarData(this.nowIndex)
        })
      }
    }
  },
  methods: {
    cancelAbility() {
      this.$emit('update:show', false)
    },
    turnLeft() {
      if (this.nowIndex <= 0) {
        return
      }
      this.nowIndex--
      this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].categoryName
      this.getRadarData(this.nowIndex)
    },
    turnRight() {
      if (this.nowIndex >= this.stuEvaluateList.length - 1) {
        return
      }
      this.nowIndex++
      this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].categoryName
      this.getRadarData(this.nowIndex)
    },
    async getRadarData(nowIndex) {
      let data = this.stuEvaluateList[nowIndex].ccExamEvaluateParamEntityList
      if (data && data.length > 0) {
        let arr = []
        let dataValue = []
        data.forEach((value) => {
          let obj = {
            text: value.paramName,
            max: 110
          }
          dataValue.push(value.score)
          arr.push(obj)
        })
        this.indicator = arr
        this.dataValue = dataValue
      }
      this.setCreditOption()
    },
    setCreditOption() {
      let myChart = echarts.init(this.$refs.creditDetailsRef)
      let option = {
        color: ['#2754F3', '#28B28B'],
        tooltip: {
          trigger: 'axis'
        },
        radar: [
          {
            indicator: this.indicator,
            center: ['50%', '50%'],
            radius: 100
          }
        ],
        series: [
          {
            type: 'radar',
            symbolSize: 0,
            tooltip: {
              trigger: 'item'
            },
            data: [
              {
                value: this.dataValue,
                name: this.nowStuEvaluateName,
                lineStyle: {
                  width: 1
                },
                areaStyle: {
                  color: 'rgba(39, 84, 243, 0.2)'
                }
              }
            ],
            label: {
              show: true,
              formatter: function(params) {
                return params.value
              },
              color: '#2754F3'
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.ability_container {
  width: 100%;
  display: flex;
  justify-content: center;

  .ability_state_content {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #ebebeb;
    padding: 24px;
    box-sizing: border-box;

    .turn_total {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-icon-d-arrow-left,
      .el-icon-d-arrow-right {
        color: #28b28b;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
      }

      .text {
        font-size: 16px;
        margin: 0 20px;
      }
    }

    .creditDetails {
      width: 100%;
      height: 375px;
    }
  }
}

.prohibited {
  cursor: not-allowed !important;
  opacity: 0.4;
}
</style>
